Open topic with navigation

Changing the Look and Feel of WebLink

There are two things that can be done to change the way WebLink appears to your website users: changing the default style sheet and uploading header graphics.

Style Sheet

WebLink comes with a standard default style sheet that controls the way the modules appear when the tool is accessed. This style sheet can be modified to more closely match your church website.

Note: You must download the default style sheet and modify it to make changes. Uploading a different style sheet will cause unexpected behavior in the WebLink modules.

To download the default style sheet

  1. Click WebLink > WebLink Setup > Church Information. The Church Information form appears.
  2. Click View beside the Default radio button in the Style sheet field. A dialog box may appear asking if you want to view the file or save it.
  3. Save the file on your computer.

You can open the style sheet file with any text editor such as Notepad. Make any changes to the file that you wish.

Save the file to a location on your computer and ensure you keep the .css extension when naming the file. For example, mystylesheet.css. You can now upload the new style sheet in Fellowship One as follows.

To upload a custom style sheet

  1. Click WebLink > WebLink Setup > Church Information. The Church Information form appears.
  2. Select the Custom radio button in the Style sheet field. A Browse file field will appear.
  3. Click Browse. The Choose file dialog box appears.
  4. Locate your custom style sheet on your computer, select it, and click Open. The dialog box will close and the path to the file will appear in the Browse file field.
  5. Click Save to save your changes.

Note: Your custom style sheet can be downloaded and modified at any time by clicking the view my style sheet link beside the Custom field on the Church Information form. Make any changes and then repeat the previous procedure to upload the file with your changes.

Note: You may need to clear your browser's history and cache files before you can see the changes made to the style sheet file.

Header Files (Skin Manager)

You may also change the way WebLink appears to your users by uploading custom graphics to appear at the top of the WebLink tool.

Note: The style sheet has a hard coded node that affects the size of the header graphic. The default size is 600 pixels wide by 65 pixels high. This can be changed by finding the .HeaderTitleImage style in the style sheet and editing it to reflect the pixel size of your custom header image.

Your custom image should be in JPG format for best results. Additionally, the graphic should also be a relatively small file weight size to prevent any lag time in loading the WebLink tools. The default size of the graphic is 600 pixels wide by 65 pixels high. No matter what size your header graphic is, it will be resized to match these dimensions unless you modify the WebLink style sheet as described in the style sheet section above.

Use the following procedure to upload your header graphics.

To upload a graphic

  1. Select WebLink > WebLink Setup > Skin Manager from the menu options on the WebLink tab. The Skin Manager form appears.
  2. Select the module to work with from the Module type drop-down list. The following are available:
  3. Type a name for the module. This name will replace the Internet browser title bar.
  4. Select the Custom radio button in the Header graphic field. A new Browse field will display.
  5. Click Browse. The File Upload dialog box will appear.
  6. Locate your custom graphic on your computer, select it, and then click Open. The dialog box will close and the path to your graphic will appear in the Custom field.
  7. Click Save to commit the changes.

After you have configured each module, the Skin Manager form will no longer appear. However, you can edit any previously configured item at any time. Notice the Edit link beside each WebLink module in the Skin Configuration Values grid. Click Edit to make any changes.